<template>
  <div class="f_div">
    <div class="t_div">财务管理 / <a href="#">应付对账单</a></div>
    <el-container>
      <el-header class="header2">
        <div class="h_div">
          <div class="h_in_vid">
            <el-form
              ref="form"
              :inline="true"
              :model="searchForm"
              class="demo-form-inline"
            >
              <el-form-item label="结算状态：">
                <el-input v-model="value" placeholder="请输入始发地"></el-input>
              </el-form-item>
              <el-form-item label="创建日期：">
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="To"
                  start-placeholder="请选择日期"
                  end-placeholder="请选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="搜索：">
                <el-input
                  v-model="value2"
                  placeholder="请输入关键字搜索"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="tjian">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-header>
      <el-main class="main">
        <el-table
          height="442px"
          :data="tableData"
          style="width: 100%"
          row-key="depart_id"
          default-expand-all
          stripe
          :header-cell-style="{
            background: '#F7F7F7',
            color: '#999',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="payable_reconciliation_number"
            label="对账单号"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="cr_cp_name"
            label="承运商"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="billing_status"
            label="结算状态"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="create_by"
            label="创建人"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            width="200"
          ></el-table-column>
          <el-table-column label="操作">
            <template #default>
              <el-button link type="primary" @click="MX()"> 明细 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[4, 6, 8, 10]"
            :size="size"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>
  
  <script>
import { ref, reactive, resolveComponent, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import $http from "@/axios/base.js";

export default {
  setup() {
    let tableData = ref([]);
    let value = ref("");
    let value1 = ref("");
    let value2 = ref("");
    let currentPage = ref("1");
    let pageSize = ref("10");
    let ord_id = ref();
    let sign_id = ref();
    let ct_id = ref();

    let router = useRouter();

    function MX() {
      router.push({ path: "/Receivable_meter" });
    }

    function show() {
      $http
        .get(
          `http://localhost:5261/api/Payable_meter/GetPayable_meter/${currentPage.value},${pageSize.value}`
        )
        .then((res) => {
          tableData.value = res;
          res.forEach((item, index) => {
            GetSign_id(item.sign_id, index);
            GetWb_id(item.wb_id, index);
            GetCarrier_id(item.cr_id, index);
            GetDrivers_id(item.dv_id, index);
          });
        })
        .catch((err) => console.log(err));
    }

    const GetSign_id = (id, index) => {
      $http
        .get(`http://localhost:5261/api/Payable_meter/GetSign_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
        })
        .catch((err) => console.log(err));
    };

    const GetWb_id = (id, index) => {
      $http
        .get(`http://localhost:5261/api/Payable_meter/GetWb_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
        })
        .catch((err) => console.log(err));
    };

    const GetCarrier_id = (id, index) => {
      $http
        .get(`http://localhost:5261/api/Payable_meter/GetCarrier_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
        })
        .catch((err) => console.log(err));
    };

    const GetDrivers_id = (id, index) => {
      $http
        .get(`http://localhost:5261/api/Payable_meter/GetDrivers_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
          tableData.value[index].create_time = new Date(tableData.value[index].create_time).toISOString().slice(0, 10).toString();
        })
        .catch((err) => console.log(err));
    };

    onMounted(() => {
      show();
    });

    function tjian() {
      alert(value2.value);
      axios
        .get(
          "http://localhost:5261/api/Bill_ol/GetBill_condition?Origin_place=" +
            value.value +
            "&Det_place=" +
            value1.value +
            "&Pickup_endtime=" +
            value2.value +
            "&currentPage=" +
            currentPage.value +
            "&pageSize=" +
            pageSize.value
        )
        .then((res) => {
          tableData.value = res.data;
        })
        .catch((err) => console.log(err));
    }

    const searchForm = reactive({
      level: "1",
      dateRange: "",
      keyword: "",
    });

    let currentRow = ref(null);

    function handleSearch() {
      console.log(searchForm);
    }

    function handleReset() {
      // 重置表单
      searchForm.level = "";
      searchForm.dateRange = "";
      searchForm.keyword = "";
      // 重置表格数据
      // ...
    }

    function handlePageChange(val) {
      currentPage.value = val;
    }

    return {
      value,
      value1,
      value2,
      tableData,
      searchForm,
      currentPage,
      pageSize,
      handleSearch,
      handleReset,
      handlePageChange,
      //deleteCustomer,
      currentRow,
      show,
      tjian,
      MX,
      ord_id,
      sign_id,
      ct_id,
    };
  },
};
</script>
  
  <style scoped>
.pagination-container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}

.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}

a {
  text-decoration: none;
}

.f_div {
  padding: 0px 50px;
}

.h_div {
  height: 39px;
}

.h_in_vid {
  width: 1400px;
  height: 20px;
  margin-top: 20px;
  display: flex;
}

.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}

.header2 {
  background-color: #ffffff;
}

.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 650px;
}
</style>